import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useLocation,
    useHistory
} from "react-router-dom";

var routes = [
    {
        path: "/sandwiches",
        name: "Sandwiches",
        component: Sandwiches
    },
    {
        path: "/tacos",
        name: "Tacos",
        component: Tacos,
        routes: [
            {
                path: "/tacos/bus",
                name: "Bus",
                component: Bus
            }, {
                path: "/tacos/cart",
                name: "Cart",
                component: Cart
            }
        ]
    },
    {
        path: "/test",
        name: "test"
    }
];

export default function RouteConfigExample() {
    return (
        <Router>
            <div>
                <ul>
                    {
                        routes.map((route, i) =>
                            (<li key={i}>
                                <Link to={route.path}>{route.name}</Link>
                            </li>)
                        )
                    }
                </ul>
                <Switch>
                    {
                        routes.map((route, i) => {
                            if(route.name!=="test"){
                                var props = {...route};
                                if(i===0) props.exact = true;
                                return (
                                    <RouteWithSubRoutes key={i} {...props}/>
                                );
                            }
                        })
                    }
                    <Route path="*">
                        <NoMatch></NoMatch>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

function NoMatch(){
    let location = useLocation();
    let history = useHistory();
    console.log('location');
    console.log(location);
    console.log('history');
    console.log(history);
    return (<h3>No match for <code>{location.pathname}</code><button onClick={e=>{
        history.go(-1);
    }}>跳转</button></h3>);
}

function Sandwiches() {
    return <h2>Sandwiches</h2>;
}

function Tacos({ routes,name }) {
    return (
        <div>
            <h2>Tacos</h2>
            <ul>
                {
                    routes.map((route, i) => {
                        return (<li key={i}>
                            <Link to={`${route.path}`}>{route.name}</Link>
                        </li>)
                    })
                }

            </ul>
            <Switch>
                {
                    routes.map((route, i) => {
                        return <RouteWithSubRoutes key={i} {...route}></RouteWithSubRoutes>
                    })
                }
            </Switch>
        </div>
    );
}

function Bus() {
    return <h3>Bus</h3>
}

function Cart() {
    return <h3>Cart</h3>
}

// render 属性解析后在poops 中可以通过  props.render 来访问
// render 属性是需要经过处理的，Route 内部是如何处理的
// 这里的render 属性的方式不知道为什么没有生效
function RouteWithSubRoutes(props) {
    return (
        <Route path={props.path} children={
            // props => {
                <props.component {...props}></props.component>
            // }
        }>
            {/* {
                <props.component {...props}></props.component>
            } */}
        </Route>
    );
}